<template>
	<view class="container">
		<view class="box-form">
			<view class="box-u-upload">
			  <view @click="startUpload">
				  <view style="position: relative;">
					  <view class="box-view"></view>
					  <u-upload
					  	:action="action"
					  	:file-list="fileList"
					  	@afterRead="uploadAfterRead"
					  	:maxCount="1"
					  	height="300"
					  	width="300"
					  	:deletable="false"
					  	:previewFullImage="false"
					  	:useBeforeRead="true"
					  	ref="upload"
					  ></u-upload>
				  </view>
			  </view>
			</view>
			<view>
				<u--input
				  placeholder="请输入图片URL地址"
				  border="surround"
				  v-model="action"
				></u--input>
			</view>
			<view class="box-sign-in">
				<u-button class="sign-in" @click="cancellation" loadingMode="semicircle" :loading="loading" loadingText="更改中..." loadingSize="60">取 消</u-button>
				<u-button class="sign-in" @click="submit" color="#c00000" loadingMode="semicircle" :loading="loading" loadingText="更改中..." loadingSize="60">
					确 定
				</u-button>
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import { userinfoLode , updateAvatar } from "@/api/getList.js";
	export default {
		data() {
			return {
				loading: false,
			    action: '',
				fileList: [],
				userInfo: {}
			}
		},
		onShow() {
			this.getUserinfo();
		},
		created() {
			
		},
		methods: {
			startUpload(){
				this.$refs.upload.chooseFile();
			},
			// 取消
			cancellation(){
				this.fileList = [];
				this.getUserinfo();
			},
			// 确定
			async submit(){
				if(!this.action)return;
				const data = await updateAvatar({ avatar: this.action });
				this.$refs.uToast.show({ message: data.message });
				this.getUserinfo();
			},
			async getUserinfo(){
				const { data } = await userinfoLode({});
				this.userInfo = data;
				this.fileList = this.userInfo.user_pic ? [{ url: this.userInfo.user_pic }] : [];
			},
			uploadAfterRead({ file }, fileList) {
			  const _this = this;
			  _this.fileList = [];
			  let lists = [].concat(file)
			  let fileListLen = this[`fileList`].length
			  lists.map((item) => {
			  	_this[`fileList`].push({
			  		...item,
			  		status: 'uploading',
			  		message: '更新中'
			  	})
			  });
			  fetch(file.url).then(res => res.arrayBuffer()).then(arrayBuffer => {
			    const base64 = uni.arrayBufferToBase64(arrayBuffer);
			    const dataUrl = 'data:image/jpeg;base64,' + base64;
				let item = _this[`fileList`][fileListLen]
				_this[`fileList`].splice(fileListLen, 1, Object.assign(item, {
					status: '',
					message: '',
					url: dataUrl
				}));
				_this.action = dataUrl;
			  });
			}
		},
		onReady() {

		},
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 100%;
		box-sizing: border-box;
		padding: 0 40rpx;
		min-height: calc(100vh);
		background-color: #FFFFFF;
	}
	.box-view {
		position: absolute;
		width: 100%;
		height: 100%;
		z-index: 1;
		top: 0;
	}
	.box-u-upload {
		width: 100%;
		display: flex;
		justify-content: center;
		padding-top: 15vh;
		padding-bottom: 80rpx;
		/deep/ .u-upload {
			flex: unset !important;
		}
	}
	.box-sign-in {
		width: 100%;
		box-sizing: border-box;
		padding:  0 100rpx;
		.sign-in {
			margin-top: 30rpx;
		}
	}
	/deep/ .u-icon__icon.uicon-camera-fill {
		font-size: 100rpx !important;
	}
</style>
